<!-- 接收数据端负责调用事件，进行事件触发后的接收数据动作 -->
<template>
  <div class="father">
    <h3>父组件</h3>
	<h4 v-show="fatherToy">子给父的玩具：{{ fatherToy }}</h4>
	<!-- 自定义事件：需要在子组件中声明，并在合适的时候触发 -->
	<Child @send-toy="getToy" />
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from './Child.vue'
	import { ref } from "vue";
	let fatherToy = ref('');
	// 数据
	function getToy(toy: string) {
		fatherToy.value = toy;
	}
	
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
    border-radius: 10px;
	}
	.father button{
		margin-right: 5px;
	}
</style>